<!--
 * @Description: 
 * @Author: xjc
 * @Date: 2022-06-21 15:20:41
 * @LastEditTime: 2022-06-21 15:25:37
 * @LastEditors: xjc
-->
<template>
  <div id="area-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Area} = G2Plot

onMounted(() => {
  fetch('https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json')
  .then((res) => res.json())
  .then((data) => {
    const area = new Area('area-container', {
      data,
      xField: 'date',
      yField: 'value',
      seriesField: 'country',
    })
    area.render()
  })
})
</script>
